<template>
  <div class="hotEvents">
    <div class="hotEvent_lf">
      <div class="hotEvent_title" >热门活动</div>
      <div class="hotEvent_more" style="">
        <a href="#">更多&gt&gt</a>
      </div>
      <div style="clear: both"></div>
      <div style="border-bottom: 1px solid #ccc;width: 920px;"></div>

      <div style="margin-top: 20px">
        <div v-for=" list in img" style="float: left;margin-right: 30px">
          <img :src="list.img"  :alt="list.alt"/>
        </div>
      </div>
    </div>

    <div class="" style="float: left">
      <news-advisory></news-advisory>
    </div>
  </div>
</template>
<script>
  import NewsAdvisory from './NewsAdvisory.vue'
  export default {
    components: {NewsAdvisory},
    name: 'hotEvents',
    data () {
      return {
        img: [
          {
            img: require('../../assets/img/hotEvents_1.jpg'),
            alt: '图片加载失败'
          },
          {
            img: require('../../assets/img/hotEvents_2.jpg'),
            alt: '图片加载失败'
          },
          {
            img: require('../../assets/img/hotEvents_3.jpg'),
            alt: '图片加载失败'
          }
        ]
      }
    }
  }
</script>
<style lang="scss" scoped>
  .hotEvents{
    width: 1440px;
    height: 350px;
    border: 1px solid transparent;
    .hotEvent_lf{
      width: 920px;
      height: 350px;
      margin-left: 100px;
      float: left;
      .hotEvent_title{
        color: #009fe9;
        font-size: 16px;
        float: left;
        border-bottom: 4px solid #009fe9;
        width: 100px;
        height:60px;
        line-height: 60px;
        text-align: center;
      }
      .hotEvent_more{
        float: right;
        width: 100px;
        height:60px;
        line-height: 60px;
        text-align: center;
        a{
          color: #999999;
          text-decoration: none;
        }
      }

    }
    .service_customer_p{
      float: left;
      width:270px;
      height: 350px;
    }
  }
</style>
